<%--
  Created by IntelliJ IDEA.
  User: 86155
  Date: 2023/10/21
  Time: 9:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加页面</title>
    <link rel="stylesheet" href="/static/iconfont/iconfont.css">
    <style>
        .imgs>img{
            width: 60px;
            height: 60px;
        }
        .hh-input{
            width: 200px;
            height: 50px;
            border: 50px;
        }

        label.hh-label {
            min-width: 10px;
            text-align: right;
        }

        .hh-upload-item-multiple > i{
            font-size: 50px;
        }
        .hh-upload-item-multiple{
            border: 1px solid #D3D4D3;
            cursor: pointer;
            width: 50px;

        }
        .imgs{
            display: none;
            gap: 5px;
        }

        .hh-upload{
            display: none;
        }
        .submit{
            background-color: lawngreen;
            width: 100px;
            height: 50px;
            margin-top: 20px;
            color: white;
            border: none;
            cursor: pointer;
        }
        .tuichu{
            background-color: red;
            width: 100px;
            height: 50px;
            margin-top: 20px;
            color: white;
            border: none;
            cursor: pointer;
        }
        .form-item{
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 10px;
        }

    </style>
</head>
<body>
    <form action="" class="hh-form">
        <div class="form-item">
           <input type="text" name="text" class="hh-input" required placeholder="这一刻的想法……">
        </div>
        <div class="form-item">
            <label class="hh-label"></label>
            <input type="file" class="hh-upload" multiple>
            <div class="imgs">
            </div>
            <div class="hh-upload-item-multiple">
                <i class="iconfont icon-add"></i>
                <input type="hidden" name="imgs" id="imgs">
            </div>
        </div>
        <div class="form-item">
            <input type="submit" value="发表" class="hh-bt submit">
            <input type="submit" value="退出" class="hh-bt tuichu">
        </div>
    </form>
    <script src="/static/js/jquery/jquery-3.7.1.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script>
        $(function () {
            //商品详情图被点击时
            $(".hh-upload-item-multiple").click(function () {
                $(".hh-upload").click();
            })

            //商品详情图点击上传方法
            $(".hh-upload").change(function () {
                let files = $(".hh-upload").prop("files");
                let formData = new FormData();
                for (let file of files){
                    formData.append("files", file);
                }
                $.ajax({
                    url: '/file/upload',                             //请求地址
                    type: 'post',                               //请求方法
                    data: formData,
                    processData: false,                         //阻止序列化表单（key=value）
                    contentType: false,                         //设置内容类型为非普通表单内容
                    dataType: 'json',
                    success: function (e) {
                        $("#imgs").val(e.message);
                        $(".imgs").empty();
                        let arr = e.message.split(",");
                        for (let img of arr){
                            let $img =$("<img>").attr("src","/file/show?name="+ img);
                            $(".imgs").append($img);
                        }
                        $(".imgs").css("display","flex");
                    }
                })
            })

            //提交
            $("form").submit(function () {
                let data = $("form").serialize();
                layer.confirm('是否确定发表朋友圈？',{icon:3,title:'提示'},function (index) {
                    $.post('/friends/add',data,function (e) {
                        console.log(e)
                        if (e.result){
                            //成功
                            layer.msg(e.message,{icon:1,time:1000},function () {
                                //刷新页面
                                // location.reload();
                                window.location.href = "/friends/index"
                            });

                        }else {
                            //失败
                            layer.msg(e.message,{icon:2})
                        }
                    })
                })
                //阻止事件冒泡
                return false;
            })

            //退出
            $(".tuichu").click(function () {
                window.location.href = "/friends/index"
            })


        })
    </script>
</body>
</html>
